<template>
  <div class="app-container">
    <!-- 这个输入框是用来树过滤的，起到查询筛选的作用 -->
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;"/>

    <!--
        ref: 过滤筛选的时候会用到，ref可以拿到树的所有属性和方法
        data: 树绑定的数据
        props: 用来配置选项，有几个子节点，子节点又有几个子节点
        filter-node-method: 对树进行筛选时用到的方法
        default-expand-all: 默认打开所有节点
     -->
    <el-tree
      ref="subjectTree"
      :data="subjectList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
  </div>
</template>
<script>
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      filterText: '', // 树过滤用字段
      subjectList: [], // 树绑定的数据
      defaultProps: { // 树的默认配置选项
        children: 'children',
        label: 'title'
      }
    }
  },

  watch: {
    filterText(val) {
      this.$refs.subjectTree.filter(val) // 监听树过滤字段的输入框，该值是过滤方法的第一个参数value
    }
  },

  created() {
    this.fetchNodeList()
  },

  methods: {
    // 获取树绑定的数据
    fetchNodeList() {
      subject.getNestedTreeList().then(response => {
        if (response.success === true) {
          this.subjectList = response.data.items
        }
      })
    },

    // 树过滤调用的方法(value是树过滤输入框中的值，data是后端返回的绑定数据中的值)
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    }
  }

}
</script>
